<template>
    <div class=''>
     <!-- bill -->
     <ul class="flex nav">
         <li @click="active=index" v-for="(val,index) in nav" :key="val" :class="{
             active:active===index
         }">
             {{val}}
         </li>
     </ul>

     <div v-for="item in list" :key="item.billid">
			<!-- 图 -->
			<img width="50px" :src="$store.getters.host + item.icon" alt="" />
			<!-- 内容 -->
			<span>{{ item.goods_name }}</span
			>&nbsp; <span>{{ item.date |date }}</span
			>&nbsp;
			<!-- 价格 -->
			<span>{{ item.price | float | $ }}</span>
			<!-- 操作按钮 -->
			<button @click="setState(item)">操作</button>
		</div>

 </div>
</template>

<script>
import {getBillApi,setBillApi} from"@/api/billl"
export default {
    data() {
        return {
          nav:['代付款','代发货','待收货','评价','全部'],
          active:1,
          list:[]
          };
     
    },
   mounted() {
     this.getBill()
 },
    methods: {
     getBill(query){
       getBillApi(query||null).then(({data})=>{
           this.list=data.result
       })
     },
     //操作订单
     setState(data) {
			const { state, goods_id, uid, billid } = data
			setBillApi({ state: state + 1, goods_id, uid, billid }).then(
				({ data }) => {
					if (data.code) {
						// 重新获取数据
						this.getBill()
					} else {
						alert('操作失败！')
					}
				}
			)
		},
   },
    computed:{
    _list(){
        return this.list.filter((i)=>{
            if(this.active===4){
                return i
            }else{
                return i.state==this.active+1
            }
        })
    }
   },
   watch:{
       active(n){
           if(n>=1){
               this.getBill({
                   type:'all'
               })
           }
       }
   }
};
</script>

<style lang='scss' scoped>
.flex{
    display: flex;
}
.nav li{
    margin: 0 20px;
    &.active{
    color: white;
    background: #f00;
}
}

</style>
